<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>范文管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../../../static/plugin/layui/css/layui.css" th:href="@{/plugin/layui/css/layui.css}"
          media="all"/>
    <link rel="stylesheet" href="../../../static/back_css/public.css" th:href="@{/back_css/public.css}" media="all"/>
    <link rel="stylesheet" href="../../../static/back_css/article_management.css"
          th:href="@{/back_css/article_management.css}" media="all">
    <link href='../../../static/plugin/umeditor/themes/default/css/umeditor.css' th:href="@{/plugin/umeditor/themes/default/css/umeditor.css}" type="text/css" rel="stylesheet" >



</head>
<body>
<div id="main">
    <div class="container">
        <div class="container_top">
            <ul>
                <li>
                    <input type="text" id="searchText" name="name" placeholder="请输入文章名">
                    <a href="#" id="serach"> </a>
                </li>
                <li>
                    <button style="width: 45px;height: 25px;" class="search_btn layui-btn layui-btn-xs layui-bg-orange"
                            onclick="searchName()" id="search">查询
                    </button>
                </li>
                <li>
                    <button class=" layui-bg-orange" onclick="create()" type="button">新建范文</button>
                </li>
            </ul>
        </div>
        <div id="activities" class="container_content">
            <ul>

            </ul>

        </div>
        <div class="container_footer" id="demo7"></div>
    </div>
    <input type="hidden" id="isSup" th:value="${isSup}"/>
</div>

<!--<div class="art_details_content" style="display: none">
    <button class="layui-btn" onclick="editArt(this)">编辑</button>

</div>-->
<div id="edit_details" style="display: none">
    <form class="layui-form " id="edit_content">
        <div class="layui-form-item">
            <label class="layui-form-label">范文标题</label>
            <div class="layui-input-block">
                <input type="text" name="art_title" id="art_title" lay-verify="title" autocomplete="off"
                       placeholder="请输入范文标题"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input type="text" name="author" id="author" lay-verify="title" autocomplete="off"
                       placeholder="请输入作者姓名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item reading_count">
            <label class="layui-form-label">阅读数量</label>
            <div class="layui-input-block">
                <input type="text" name="read_count" id="read_count" lay-verify="title" autocomplete="off"
                       placeholder="0"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">范文字数</label>
            <div class="layui-input-block">
                <input type="text" name="work_count" id="work_count" lay-verify="title" autocomplete="off"
                       placeholder="0"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">范文内容</label>
            <div class="layui-input-block">
                <textarea name="art_content"  placeholder="请输入内容"  lay-verify="required"  lay-reqText="范文不能为空"  class="art_content" id="art_content"></textarea>
                </textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">范文简介</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea short_content" name="short_content"></textarea>
            </div>
        </div>
        <button type="button" class="layui-btn layui-bg-gray art_cancle_btn">取消</button>
        <button type="button" class="layui-btn layui-bg-orange art_submit_btn" lay-submit lay-filter="submitForm">确定</button>
        <button type="button" class="layui-btn layui-btn-danger art_edit_btn">编辑范文</button>
        <input type="hidden" id="page"/>
        <input type="hidden" id="limit"/>
        <input type="hidden" id="curr"/>
    </form>
</div>
<script type="text/javascript" src="../../../static/js/jquery.js" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js" th:src="@{/plugin/layui/layui.js}"></script>
<script type="text/javascript" src="../../../static/plugin/utf8-php/umeditor.config.js"
        th:src="@{/plugin/utf8-php/umeditor.config.js}"></script>
<script type="text/javascript" src="../../../static/plugin/utf8-php/umeditor.js"
        th:src="@{/plugin/utf8-php/umeditor.js}"></script>
<script type="text/javascript">
    // window.um = UM.getEditor('art_content');
    var um = UM.getEditor('art_content',{
        initialFrameWidth: '100%'
    });
    var layer, laypage,id,layedit,form;
    layui.use(['laypage', 'layer','layedit','form'], function () {
        laypage = layui.laypage;
        layer = layui.layer;
        layedit=layui.layedit;
        form=layui.form;
       layerpage_render();

    })
    function layerpage_render(){
        laypage.render({
            elem: 'demo7'
            , count: parseInt($("#page").val())
            , limit: 9
            ,curr:parseInt()
            , jump: function (obj, first) {
                //console.log(obj)
                if (!first) {
                    $.ajax({
                        url: '/getArticles'
                        , async: false
                        , dataType: 'json'
                        ,data: {
                            page:obj.curr,
                            limit:obj.limit,
                            name:$("#searchText").val()
                        }
                        , success: function (data) {
                            var articles = data.articles.list;
                            if (data.code == 0) {
                                $(".container_content>ul").empty()
                                var html = "";
                                for (var i in articles) {
                                    html += '<li class="art_content">' +
                                        '                    <div>' +
                                        '                        <h4>' + articles[i].article_TITLE + '</h4>' +
                                        '                        <p>' + articles[i].author + '</p>' +

                                        '                    </div>' +
                                        '                    <div>' +
                                        '                        <p class="art_item">' + articles[i].work_CONTENT + '</p>' +
                                        '                    </div>' +
                                        '                    <div>' +
                                        '                        <div style="width: 50%;height: 100%;border: 1px solid #dad1d1; border-top: none; border-left: none;">' +
                                        '                           <button onclick="editArt(this)" style="display: block;width: 100%;height: 100%" data-id="'+articles[i].id+'">查看</button>' +
                                        '     <input type="hidden" name="url" value="' + articles[i].article_URL + '">                       ' +
                                        '                        </div>' +
                                        '                        <div style="width: 50%;height: 100%">' +
                                        '                            <button onclick="del(this)" style="display: block;width: 100%;height: 100%;color: red" data-id="'+articles[i].id+'">删除</button>' +
                                        '                        </div>' +
                                        '                    </div>' +
                                        '                </li>'
                                }
                                $(".container_content>ul").append(html + '<div class="clear"></div>')

                            }
                            //console.log(data)
                        }
                    })
                }
            }
        });
    }
    //搜索
    function searchName(){
        $.ajax({
            url: '/getArticles'
            , async: false
            , dataType: 'json'
            ,data: {
                name:$("#searchText").val()
            }
            , success: function (data) {
                var articles = data.articles.list;
                $("#page").val(data.articles.total);
                $("#limit").val(data.articles.pageNum);
                $("#curr").val(data.articles.pageNum);
                if (data.code == 0) {
                    $(".container_content>ul").empty()
                    var html = "";
                    for (var i in articles) {
                        html += '<li class="art_content">' +
                            '                    <div>' +
                            '                        <h4>' + articles[i].article_TITLE + '</h4>' +
                            '                        <p>' + articles[i].author + '</p>' +

                            '                    </div>' +
                            '                    <div>' +
                            '                        <p class="art_item">' + articles[i].work_CONTENT + '</p>' +
                            '                    </div>' +
                            '                    <div>' +
                            '                        <div style="width: 50%;height: 100%;border: 1px solid #dad1d1; border-top: none; border-left: none;">' +
                            '                           <button onclick="editArt(this)" style="display: block;width: 100%;height: 100%" data-id="'+articles[i].id+'">查看</button>' +
                            '     <input type="hidden" name="url" value="' + articles[i].article_URL + '">                       ' +
                            '                        </div>' +
                            '                        <div style="width: 50%;height: 100%">' +
                            '                                                        <button onclick="del(this)" style="display: block;width: 100%;height: 100%;color: red" data-id="'+articles[i].id+'">删除</button>' +
                            '                        </div>' +
                            '                    </div>' +
                            '                </li>'
                    }
                    $(".container_content>ul").append(html + '<div class="clear"></div>')

                }
                //console.log(data)
                layerpage_render();
            }
        })
    }


    //页面获取内容
    $(function () {
        $.ajax({
            url: '/getArticles'
            , async: false
            , dataType: 'json'
            , success: function (data) {
                var articles = data.articles.list;
                $("#page").val(data.articles.total);
                $("#limit").val(data.articles.pageNum);
                $("#curr").val(data.articles.pageNum);
                if (data.code == 0) {
                    $(".container_content>ul").empty()
                    var html = "";
                    for (var i in articles) {
                        html += '<li class="art_content">' +
                            '                    <div>' +
                            '                        <h4>' + articles[i].article_TITLE + '</h4>' +
                            '                        <p>' + articles[i].author + '</p>' +

                            '                    </div>' +
                            '                    <div>' +
                            '                        <p class="art_item">' + articles[i].work_CONTENT + '</p>' +
                            '                    </div>' +
                            '                    <div>' +
                            '                        <div style="width: 50%;height: 100%;border: 1px solid #dad1d1; border-top: none; border-left: none;">' +
                            '                           <button onclick="editArt(this)" style="display: block;width: 100%;height: 100%" data-id="'+articles[i].id+'">查看</button>' +
                            '     <input type="hidden" name="url" value="' + articles[i].article_URL + '">                       ' +
                            '                        </div>' +
                            '                        <div style="width: 50%;height: 100%">' +
                            '                            <button onclick="del(this)" style="display: block;width: 100%;height: 100%;color: red" data-id="'+articles[i].id+'">删除</button>' +
                            '                        </div>' +
                            '                    </div>' +
                            '                </li>'
                    }
                    $(".container_content>ul").append(html + '<div class="clear"></div>')

                }
                //console.log(data)
            }
        })

    })
//创建范文
    function create() {
        var isSup = $("#isSup").val();
        if(isSup==1) {
            $(".art_edit_btn").css("display", "none")
            $(".reading_count").css("display", "none")
            $(".art_edit_btn").siblings(".layui-btn").css("display", "inline-block")
            $("#edit_content")[0].reset()
            um.setContent("")
            $(".layui-input").prop("readonly", false)
            $(".layui-textarea").prop("disabled", true)
            um.setEnabled();
            var workCount = um.getContentTxt().toString().length
            layer.open({
                type: 1,
                area: ['100%', '100%'],
                content: $("#edit_details"),
                title: '创建范文'
            })
            $(".art_cancle_btn").click(function () {
                layer.closeAll()
            })

            getFocus();

            form.on('submit(submitForm)', function (data) {
                //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                //console.log(data.field)
                var data = data.field//当前容器的全部表单字段，名值对形式：{name: value}
                //console.log(data.work_count)
                if (data != "" || data !== null) {
                    if (data.art_title == "" || data.art_title == null) {
                        layer.msg("请输入范文题目！")
                    } else if (data.author == "" || data.author == null) {
                        layer.msg("请输入作者！")
                    } else {
                        $.ajax({
                            url: '/addArticle'
                            ,type: 'POST'
                            , data: {
                                ARTICLE_URL: data.art_content,
                                ARTICLE_TITLE: data.art_title,
                                AUTHOR: data.author,
                                WORD_COUNT: data.work_count,
                                WORK_CONTENT: data.short_content,
                            }
                            , success: function (data) {
                                //console.log(data)

                                layer.closeAll();
                                layer.msg("创建范文成功")
                                setTimeout(function () {
                                    window.location.href = ""
                                }, 500)


                            }
                        })
                    }
                }

            });
        }else{
            return layer.msg("您暂无权限创建范文，如需创建请联系超级管理员！")
        }
    }
/*查看范文
    function examine(btn) {
        console.log(btn)
        var url = $(btn).next("input").val();
        id=$(btn).attr("data-id");
        $("#art_content").empty();
        $("#art_content").append(' <iframe width="100%" height="100%" src="'+url+'"  frameborder="no" border="0"></iframe>')


                console.log(url)
                layer.open({
                    type: 1,
                    area: ['100%', '100%'],
                    title: '范文内容',
                    content: $(".art_details_content")
                })


            }*/
//编辑范文
    $(".art_edit_btn").click(function () {
        var isSup = $("#isSup").val();
        if(isSup==1) {
            $(".layui-input").prop("readonly", false)
            // $(".layui-textarea").prop("disabled", false)
            $("#edit_details input[name='read_count'],#edit_details input[name='work_count']").prop("readonly", true)
            $(this).css("display","none")
            $(this).siblings(".layui-btn").css("display","inline-block")
            um.setEnabled();//编辑启用
            // $(this).css("display","none")

            $(".art_cancle_btn").click(function () {
                layer.closeAll()
            })
        }else{
            return layer.msg("您暂无权限编辑范文！")
        }
    })
            //编辑范文
            function editArt(btn) {
                $(".layui-input").prop("readonly", true)
                $(".layui-textarea").prop("disabled", true)
                $("#art_title").val("")
                $("#author").val("")
                $("#read_count").val("")
                $("#work_count").val("")
                $(".short_content").val("")
                $(".reading_count").css("display","block")
                $(".art_cancle_btn,.art_submit_btn").css("display","none")
                $(".art_edit_btn").css("display","inline-block")
                um.setDisabled();//查看禁用富文本
                id=$(btn).attr("data-id");
                //console.log(id)

                $("#edit_details input[name='read_count'],#edit_details input[name='work_count']").prop("readonly", true)
                layer.open({
                    type: 1,
                    area: ['100%', '100%'],
                    content: $("#edit_details"),
                    title: '编辑范文'
                })

                    // 获取范文基本信息
                $.ajax({
                    url: '/getArticle'
                    ,async: false
                    ,dataType: 'json'
                    ,data:{
                        ID:parseInt(id)
                    }
                    , success: function (data) {

                        //console.log(data)
                        var article = data.article
                       var  editUrl =article.article_URL

                       // console.log(editUrl)
                        if(data.code==0){
                            $("#art_title").val(article.article_TITLE)
                            $("#author").val(article.author)
                            $("#read_count").val(article.aloud_NUM)
                            $("#work_count").val(article.word_COUNT)
                            $(".art_edit_content>#art_content").val()
                            $(".short_content").val(article.work_CONTENT)
                            $.ajax({
                                url: "/getHtml" ,
                                async:false,//必须同步提交
                                dataType:"json",
                                data:{
                                    url : editUrl
                                },
                                success:function (res) {
                                    console.log("html>>",res)
                                    if(res.code == 1){
                                        um.setContent(res.data);
                                       var html=  um.getContent()
                                       //  var html1 = um.getContentTxt()
                                       //  var html2 = um.getContentTxt().toString().length
                                    }else{
                                        layer.msg("发生了未知的错误！");
                                    }
                                },error:function(res){
                                    //console.log(res);
                                    layer.msg("获取数据失败，请检查网络！")
                                }
                            })
                        }
                    }
                })
                getFocus();
                //监听编辑提交
                form.on('submit(submitForm)', function(data){
                    //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    //console.log(data.field)

                    var data =data.field//当前容器的全部表单字段，名值对形式：{name: value}
                    //console.log(data.work_count)
                    if(data!=""||data!==null){
                        if(data.art_content==""||data.art_content==null){
                            layer.msg("范文内容不允许为空！")
                        }else if(data.art_title==""||data.art_title==null){
                            layer.msg("请输入范文题目！")
                        }else if(data.author==""||data.author==null){
                            layer.msg("请输入作者！")
                        }else{
                            $.ajax({
                                url:'/updateArticle'
                                ,type: 'POST'
                                ,data:{
                                    ID:parseInt(id),
                                    ARTICLE_URL:data.art_content,
                                    ARTICLE_TITLE:data.art_title,
                                    AUTHOR:data.author,
                                    WORD_COUNT:data.work_count,
                                    WORK_CONTENT:data.short_content
                                }
                                ,success:function (data) {
                                    //console.log(data)

                                    layer.closeAll();
                                    layer.msg("修改范文成功")
                                    setTimeout(function () {
                                        window.location.href = ""
                                    },500)
                                }
                            })
                        }
                    }

                });

            }
    //自动截取范文简介
    function getFocus(){
        $(".art_content").blur(function () {
            var content = um.getContent()
            //console.log(um.isFocus())
            //console.log(content)
            if (um.isFocus()) {
                var shortContent =um.getContentTxt().toString().substr(0,50);
                var workCount = um.getContentTxt().toString().length
                //console.log(shortContent)
                $(".short_content").val(shortContent)
                $("#work_count").val(workCount)
            }
        })
    }
            //删除
    function del(btn) {
        var isSup = $("#isSup").val();
        if(isSup==1) {
            var ID=$(btn).attr("data-id");
            //console.log(ID)
            $.ajax({//进行审核提交
                url: '/deleteArticle',
                async: false,
                data: {
                    ID:parseInt(ID)
                },
                success: function (data) {
                    //console.log(data)
                    layer.confirm('你确定要删除吗？', function(index){
                        layer.msg("删除成功！");
                        setTimeout(function(){window.location.href='';},500)
                        // window.location.href='/getActivityDetails';

                    },function (index) {
                        layer.close(index);
                    });
                }
            })
        }else{
            return layer.msg("您暂无权限删除范文！")
        }
    }


</script>
</body>
</html>